<template>
  <FilmList :key="'film' + list.length" :type="type" :list="list" @get-more-data="getnowPlaying"></FilmList>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { nowPlayingListData } from "@/api/api";
import FilmList from "../components/FilmList.vue";
// 导入电影列表的相关关键属性数据
// 导入电影列表的相关关键属性数据
import type { ListType } from "../types/index";
// 分页数据
let page = "1";
// 当前类型  正在热映，不需要做成响应式的监听数据
const type = 1;
// 显示电影列表信息数据
let list = ref<Array<ListType>>([]);
onMounted(async () => {
  getnowPlaying()
})
const getnowPlaying = async () => {
  const ret = await nowPlayingListData(page);
  list.value = [...list.value, ...ret.data.films];
  page = (parseInt(page) + 1).toString();
}
</script>
<style lang="sass" scoped>
</style>